<template>
  <div>
    <!-- 案例1 -->
    <button @click="isShow=true">加入购物车</button>
    <v-picker v-if="isShow" @hide="isShow=false"></v-picker>

    <!-- 案例2 -->
    <div class="box">
      <h3>登录页面</h3>
      <button @click="isLogin=true">登录</button>
      <!-- <div class="toast">
        <div class="text">登录成功</div>
      </div> -->
      <v-toast v-if="isLogin" text="登录" @hideT="isLogin=false"></v-toast>
    </div>

    <div class="box">
      <h3>注册页面</h3>
      <button @click="isRegiser=true">注册</button>
      <!-- <div class="toast">
        <div class="text">注册成功</div>
      </div> -->
      <v-toast v-if="isRegiser" text="注册" @hideT="isRegiser=false"></v-toast>
    </div>

  </div>
</template>

<script>
import vPicker from "./case1/vPicker.vue";
import vToast from "./case2/vToast.vue";
export default {
  components: {
    vPicker,
    vToast
  },
  data() {
    return {
      isShow: false,
      isLogin:false,
      isRegiser:false,
      isDelete:false,
    };
  },
  methods: {
    // login(){
    //     this.isLogin = true;
    //     setTimeout(()=>{
    //         this.isLogin = false;
    //     },2000)
    // },
    // register(){
    //     this.isRegiser = true;
    //     setTimeout(()=>{
    //         this.isRegiser = false;
    //     },2000)
    // }
  }
};
</script>

<style>

button {
  padding: 10px;
}
</style>

